<script setup>
import { reactive, ref, onMounted, computed } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
import AOS from "aos";

const store = useStore();

const router = useRouter();

const formRef = ref();
const inputRef = ref();

const from = reactive({
  username: "",
  password: "",
});

async function Login() {
  const xssPattern = /(~|\{|\}|"|'|<|>|\?)/g
  if (xssPattern.test(from.username) || xssPattern.test(from.password)) {
    ElMessage.error("请勿输入特殊字符");
    return;
  }
  if (from.password == "" || from.username == "") {
    ElMessage.error("请输入账号和密码");
    return;
  }
  try {
    const result = await axios.post(`${import.meta.env.VITE_API_HOST}/login.php?user=${from.username}&pass=${from.password}`)
    if (result.data.code == 200) {
      store.dispatch('Logins', {
        user: from.username,
        Authorization: result.data.Authorization,
      })
      ElMessage.success("登录成功")
      router.push('/')
    } else {
      ElMessage.error("登录失败")
    }
  } catch (error) {
    console.log(error)
    ElMessage.error("登录失败")
  }
}
const isLoggedIn = computed(() => !!store.state.Authorization)

onMounted(() => {
  AOS.init({
    easing: "ease", // AOS 动画默认 easing
    mirror: true, // 滚动到元素上方时是否应设置动画
    initClassName: "aos-init", // 初始化后使用的 class 类
    duration: 500, // 取值范围 0-3000, 每多 1 加 50ms
    debounceDelay: 50, // 调整窗口大小时使用的 (高级)
    throttleDelay: 100, // 滚动页面时使用的延迟 (高级)
    offset: 0, // 从原始触发点的偏移量 (px)
  });
  if (isLoggedIn.value) {
    router.push('/')
  }
})
</script>

<template>
  <div class="login w100vw h100vh">
    <div class="login__wrap card-shadow overflow-hidden rounded-2" data-aos="fade-up" data-aos-duration="500">
      <div class="wrap_left" />
      <div class="wrap_right">
        <div class="wrap_right__header">
          <h3>🥤登录🍔</h3>
        </div>
        <div class="form-body">
          <el-form :model="from" ref="formRef">
            <el-form-item>
              <el-input
                ref="inputRef"
                prefix-icon="el-icon-s-custom"
                placeholder="账号"
                v-model="from.username"
                @keyup.enter="Login"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                show-password
                prefix-icon="el-icon-lock"
                placeholder="密码"
                v-model="from.password"
                @keyup.enter="Login"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <div class="w-100% flex justify-end items-center">
                <el-button type="text">忘记密码</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="Login">
                登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="login-bg"></div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(5px);

  .login-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(6px);
    background-image: url(@/assets/20200717164221_WhUUt.jpeg);
    background-size: 100%;
  }
  .login__wrap {
    display: flex;
    background: white;
    .wrap_left {
      z-index: 1;
      position: relative;
      width: 250px;
      height: 400px;
      overflow: hidden;
      background: url("@/assets/anya.jpg") center no-repeat;
      background-size: cover;
    }

    .wrap_right {
      width: 350px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .wrap_right__header {
        color: #303133;
        font-weight: bold;
        font-size: 1.2rem;
        margin-bottom: 24px;
        text-align: center;
      }
    }
  }
}
</style>
